<template>
    <!-- 标题 -->
    <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.back() }" fixed />
    <div style="height: 45px;"></div>
    <!-- 搜索框 -->
    <van-search v-model="Search" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
    <!-- 搜索空状态 -->
    <van-empty v-if="Search.length == 0 || SearchList.length == 0" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
        description="暂无搜索数据" />
    <!-- 搜索区域的渲染 -->
    <van-cell-group v-else v-for="item in SearchList">
        <van-cell :title="item.goods_name" />
    </van-cell-group>
</template>
<script setup>
import { ref, watch } from 'vue'
// 引入 lodash
import _ from 'lodash'
// 引入搜索的接口
import { searchApi } from '@/api/api';
// 自定义搜索列表数据
let SearchList = ref([])
// 自定义搜索数据
let Search = ref('')
// lodash _.debounce  防抖
watch(Search, _.debounce((val) => {
    console.log('监听的数据', val)
    searchApi(val).then(res => {
        console.log('搜索的数据列表', res)
        SearchList.value = res.data.message
    })
},1500))
// 不带防抖
// watch(Search,(val) => {
//     console.log('监听的数据', val)
//     searchApi(val).then(res => {
//         console.log('搜索的数据列表', res)
//         SearchList.value = res.data.message
//     })
// })

</script>

<style lang="scss" scoped></style>